<template>
  <div style="margin: 20px">
    <el-form :model="ruleForm"  labelPosition="right" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
      <template class="form_search" v-for="(item,index) in cloumlist" :key="index">
        <el-form-item v-if="!item.hide" :label="item.name" :prop="item.value_name" >
          <el-select v-if="item.type==2 " v-model="ruleForm[item.value_name]" :placeholder="item.placeholder"  style="width: 250px">
            <el-option :label="two.label" :value="two.value"  v-for="(two,idx) in item.list"></el-option>
          </el-select>
          <el-input v-if="item.type==1" v-model="ruleForm[item.value_name]" style="width: 250px" :placeholder="item.placeholder" ></el-input>
        </el-form-item>
      </template>
    </el-form>
    <el-button @click="modify">
      修改表单
    </el-button>
    <Configuration ref="Configuration" />
  </div>
</template>

<script>
import Configuration from  '@/components/Configuration'
import res from "@/utils/menu";
export default {
  components: {Configuration},
  props: {
    cloum: {
      type: Array,
      default: () => [] ,
    },
    modelValue: { type: Object, default: () => {} },
    name: {
      type: String,
      default: '' ,
    },
  },
  data() {
    return {
      ruleForm: {

      },
      cloumlist:[]
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    modify(){
      this.$refs.Configuration.open(this.cloum)
    }
  },
  created() {
    const configuration = sessionStorage.getItem(this.name);
    if (configuration) {//如果存在缓存
      const userColumn = JSON.parse(configuration); // 假设存储的是 JSON 字符串，需要解析
      const Arr  = userColumn.filter(item => !item.hide)
      Arr.forEach(bObj => {
        // 查找A数组中是否存在具有与B数组对象相同prop属性的对象
        const aObj = this.cloum.find(a => a.value_name === bObj.value_name);
        // 如果找到对应的对象，则将A数组对象中B数组对象缺少的属性添加到B数组对象中
        if (aObj) {
          Object.keys(aObj).forEach(key => {
            if (!bObj.hasOwnProperty(key)) {
              bObj[key] = aObj[key];
            }
          });
        }
      });
      this.cloumlist = Arr;
    } else {
      this.cloumlist = this.cloum;
    }
  },
  watch: {
    ruleForm: {
      handler() {
        this.$emit("update:modelValue", this.ruleForm);
      },
      deep: true,
    }
  },
}
</script>
<style lang="scss" scoped>
.demo-ruleForm{
  display: flex;
  flex-wrap: wrap;

}
</style>
